<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';

export default {
  name: 'count_component',
  data() {
    return {
      number: 1,
    }
  },
  methods: {
    /*  increment() {
        //   如果没有额外的操作逻辑，直接调用commit方法
        this.$store.commit('INCREMENT', this.number);
      },
      decrement() {
        this.$store.commit('DECREMENT', this.number);
      },*/
    //借助mapMutations将mutations中的方法映射到当前组件的方法中
    ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}),

    /*  incrementIfOdd() {
        // 有额外的逻辑，调用dispatch方法
        this.$store.dispatch('incrementIfOdd', this.number);
      },
      incrementSecondLater() {
        this.$store.dispatch('incrementSecondLater', this.number);
      },*/
    //借助mapActions将actions中的方法映射到当前组件的方法中
    ...mapActions(['incrementIfOdd', 'incrementSecondLater'])
  },
  computed: {
    //使用对象式写法 ...表示将对象中的所有方法都映射到当前组件的方法中
    //...mapState({sum:'sum'}),
    //使用数组式写法 ...表示将对象中的所有方法都映射到当前组件的方法中
    ...mapState(['sum']),
    ...mapGetters(['afterComputed'])
  }
}
</script>

<template>
  <div class="count_component">
    <h1>当前总和为{{ sum }}</h1>
    <h1>加工后{{ afterComputed }}</h1>
    <div class="line">
      <!-- v-model.number 直接将接收到的参数转化为数字 -->
      <select v-model.number="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <!--      <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <button @click="incrementIfOdd">总数为奇数执行加运算</button>
            <button @click="incrementSecondLater">1s后执行加运算</button>-->
      <!--      由mapMutations和mapAction生成的方法,接收的参数是默认的event 所以这里需要手动地传递参数-->
      <button @click="increment(number)">+</button>
      <button @click="decrement(number)">-</button>
      <button @click="incrementIfOdd(number)">总数为奇数执行加运算</button>
      <button @click="incrementSecondLater(number)">1s后执行加运算</button>
    </div>

  </div>
</template>

<style scoped>
.line {
  display: flex;
}

select {
  width: 40px;
  margin-right: 10px;
}

button {
  margin-right: 10px;
}
</style>